<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div style="margin: 10px 0;">微信支付</div>
      <el-table
        ref="wxTable"
        v-loading="listLoading"
        :data="wxlist"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column label="app名称" align="center">
          <template slot-scope="scope">
            <span> {{ appItem[scope.row.app] }} </span>
          </template>
        </el-table-column>
        <el-table-column label="商户号" align="center">
          <template slot-scope="scope">
            <span> {{ companyItem[scope.row.company] }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改时间"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.updateAt | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否使用" align="center">
          <template slot-scope="scope">
            <span> {{ scope.row.status ? '是': '否' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="付款渠道" align="center">
          <template slot-scope="scope">
            <span> {{ payMethodItem[scope.row.payMethod] }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="330"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="!row.status"
              type="primary"
              size="mini"
              @click="handleUpdate(row)"
            >开启</el-button>
            <el-button
              v-if="row.status"
              type="danger"
              size="mini"
              @click="handleUpdate(row)"
            >关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 10px 0; margin-top: 50px;">现在支付</div>
      <el-table
        v-loading="listLoading"
        :data="weblist"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column label="app名称" align="center">
          <template slot-scope="scope">
            <span> {{ appItem[scope.row.app] }} </span>
          </template>
        </el-table-column>
        <el-table-column label="商户号" align="center">
          <template slot-scope="scope">
            <span> {{ companyItem[scope.row.company] }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改时间"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.updateAt | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否使用" align="center">
          <template slot-scope="scope">
            <span> {{ scope.row.status ? '是': '否' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="付款渠道" align="center">
          <template slot-scope="scope">
            <span> {{ payMethodItem[scope.row.payMethod] }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="330"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="!row.status"
              type="primary"
              size="mini"
              @click="handleUpdate(row)"
            >开启</el-button>
            <el-button
              v-if="row.status"
              type="danger"
              size="mini"
              @click="handleUpdate(row)"
            >关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  getCheckGetPayChannel,
  xhrPostUpdatePayChannel
} from '@/api/customSetting'

export default {
  name: 'PayChange',
  data() {
    return {
      daterangeValue: '',
      wxlist: null,
      weblist: null,
      payMethodItem: {
        0: '微信原生', 1: '现在支付'
      },
      companyItem: {
        'BL': '博流', 'YQ': '亿趣'
      },
      appItem: {
        'HUABAN': '花伴', 'DATING': '花伴约会'
      },
      statusItem: { '0': '待兑换', '-1': '拒绝', '1': '允许' },
      listQuery: {
        pageNum: 1,
        pageSize: 100
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      getCheckGetPayChannel(this.listQuery).then(response => {
        const wxlist = []
        const weblist = []
        for (const index in response.data) {
          if (response.data[index].payMethod === 0) {
            wxlist.push(response.data[index])
          } else {
            weblist.push(response.data[index])
          }
          this.wxlist = wxlist
          this.weblist = weblist
        }
        this.listLoading = false
      })
    },
    handleUpdate(row) {
      row['status'] = !row['status']
      xhrPostUpdatePayChannel(row).then(response => {
        this.$message.success(response.message)
        this.doSearch()
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
